<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渐变边框文字效果</title>
    <link rel="stylesheet" href="../../styles/scss/animation.css" />
  </head>
  <body>
    <svg width="0" height="0">
      <filter id="dilate">
        <feMorphology
          in="SourceAlpha"
          result="DILATED"
          operator="dilate"
          radius="2"
        ></feMorphology>
        <feFlood flood-color="red" flood-opacity="1" result="flood"></feFlood>
        <feComposite
          in="flood"
          in2="DILATED"
          operator="in"
          result="OUTLINE"
        ></feComposite>

        <feMerge>
          <feMergeNode in="OUTLINE" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
      <filter id="dilateesay">
        <feMorphology
          in="SourceAlpha"
          result="DILATED"
          operator="dilate"
          radius="1"
        ></feMorphology>
      </filter>
      <filter id="erode">
        <feMorphology
          in="SourceAlpha"
          result="ERODE"
          operator="erode"
          radius="1"
        ></feMorphology>
      </filter>
      <filter id="outline">
        <feMorphology
          in="SourceAlpha"
          result="DILATED"
          operator="dilate"
          radius="1"
        ></feMorphology>

        <feFlood flood-color="green" flood-opacity="1" result="flood"></feFlood>
        <feComposite
          in="flood"
          in2="DILATED"
          operator="in"
          result="OUTLINE"
        ></feComposite>

        <feMerge>
          <feMergeNode in="OUTLINE" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
      <filter id="outlinetext">
        <feMorphology
          in="SourceAlpha"
          result="ERODE"
          operator="erode"
          radius="2"
        ></feMorphology>
        <feFlood
          flood-color="#ffffff"
          flood-opacity="1"
          result="flood"
        ></feFlood>
        <feComposite
          in="flood"
          in2="ERODE"
          operator="in"
          result="OUTLINETEXT"
        ></feComposite>
        <feMerge>
          <feMergeNode in="OUTLINETEXT" />
        </feMerge>
      </filter>
    </svg>
    <div class="five-g-container">
      <!--
        效果展示
          erode 文字会变薄
          dilate 文字会加粗
      -->
      <div class="text-border">
        <div data-text="123/678"></div>
        <div data-text="123/678"></div>
        <div data-text="123/678"></div>
      </div>
      <!---webkit-text-stroke实现效果 -->
      <div class="text-stroke-wrapper">
        <span class="text" data-text="1234567890"></span>
        <span class="text" data-text="我能吞下玻璃而不伤身体"></span>
      </div>

      <!--文字叠加 这种方式，边框并不均匀-->
      <div>
        <div class="test1" data-text="4"></div>
        <div class="test1" data-text="5"></div>
        <div class="test1" data-text="6"></div>
      </div>
      <!--文字的二次加粗-->
      <div class="test2">
        <p>文字加粗CSS</p>
        <p>文字加粗CSS</p>
        <p>文字加粗CSS</p>
        <p>文字加粗CSS</p>
      </div>
      <!--text-shadow 文字加边框-->
      <div class="test2 test21">
        <p>文字加粗CSS</p>
      </div>
      <!--drop-shadow() 文字加边框-->
      <div class="test2 test22">
        <p>多重边框CSS</p>
      </div>
      <!--svg femorphology 文字加边框-->
      <div class="test2 test23"><p>字</p></div>

      <div class="test3">
        <!--drop-shadow 只能对不规则图形生成阴影，无法生成不带模糊的边框效果-->
        <div class="arrow-button filter-drop-shadow"></div>
        <div class="arrow-button filter-outline"></div>
        <!--使用 SVG feMorphology 滤镜添加边框-->
        <div class="g-text">
          <p>Normal Text</p>
          <p class="dilate">Normal Text</p>
          <p class="erode">Normal Text</p>
        </div>
      </div>
    </div>
  </body>
</html>
